import React, { PureComponent } from 'react'
import { Link, Outlet } from 'react-router-dom'
import { withRouter } from '../../hoc'

export class Home extends PureComponent {
  navigateTo(path) {
    const { navigate } = this.props.router
    navigate(path)
  }
  
  render() {
    return (
      <div>
        <h3>Home Page</h3>
        {/* 
          Link: 用来做路由跳转的
          Outlet: 用来展示子路由的
        */}
        <div className="home-nav">
          <Link to="/home/recommend">推荐</Link>
          <Link to="/home/ranking">排行榜</Link>
          <button onClick={() => this.navigateTo('/home/songmenu')}>songmenu</button>
        </div>

        {/* Outlet(出口): 子路由的出口, 用来展示子路由的组件, 站位组件 */}
        <Outlet />
      </div>
    )
  }
}

export default withRouter(Home)